<template>
  <div>
    <el-row class="expert-intro-detail-item">
      <!-- 点击进入专家详情 -->
      <div class="entry-expert-detail-pages" @click="entryExpertDeail"></div>
      <el-col :lg="1" :md="1" :sm="1" :xs="1"
        ><div style="opacity: 0;">1</div></el-col
      >
      <el-col :lg="4" :md="4" :sm="4" :xs="6">
        <div class="expert-avator">
          <img :src="expertInfo.picture" alt="" />
        </div>
      </el-col>
      <el-col :lg="1" :md="1" :sm="1" :xs="2"
        ><div style="opacity: 0;">1</div></el-col
      >
      <el-col :lg="6" :md="6" :sm="6" :xs="15" class="expert-base-info">
        <h3>
          <span>{{ expertInfo.name }}</span>
          <span v-for="(item, index) in expertInfo.profession" :key="index">{{
            item
          }}</span>
        </h3>
        <p class="education">
          <span v-for="(degree, index) in expertInfo.degree" :key="index">{{
            degree
          }}</span>
        </p>
        <p class="field">
          <span>专家领域: </span
          ><span v-for="(item, index) in expertInfo.areas" :key="index">{{
            item
          }}</span>
        </p>
        <p class="ever-work">
          <span>曾服务企业:</span
          ><span
            v-for="(item, index) in expertInfo.assumeOffice"
            :key="index"
            >{{ item }}</span
          >
        </p>
      </el-col>
      <el-col :lg="1" :md="1" :sm="1" :xs="1"
        ><div style="opacity: 0;">1</div></el-col
      >
      <el-col :lg="10" :md="10" :sm="10" :xs="0" class="self-note">
        <span>个人简历:</span>
        <p>
          {{ expertInfo.program }}
        </p>
      </el-col>
      <el-col :lg="1" :md="1" :sm="1" :xs="1"
        ><div style="opacity: 0;">1</div></el-col
      >
    </el-row>
    <div class="expertIntroLine"></div>
  </div>
</template>

<script>
import tools from "../../utils/tools";
export default {
  props: {
    expertInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    entryExpertDeail() {
      this.$router.push(
        "/centerHome/expertDetailMobel?id=" + this.expertInfo.id
      );
    },
    // 初始化数据
    initData() {
      this.expertInfo.degree = tools.strToArray(this.expertInfo.degree);
      this.expertInfo.areas = tools.strToArray(this.expertInfo.areas);
      this.expertInfo.assumeOffice = tools.strToArray(
        this.expertInfo.assumeOffice
      );
      this.expertInfo.profession = tools.strToArray(this.expertInfo.profession);
    },
  },
  created() {
    this.initData();
  },
  watch:{
    expertInfo(newData,oldData){
      if(newData!==oldData){
         this.initData();
      }
    }
  }
};
</script>

<style scoped>
.education span {
  padding: 0px 10px 0px 0px;
}
.expert-intro-detail-item {
  margin-top: 20px;
  position: relative;
}
.expert-base-info h3 {
  font-weight: 400;
  font-size: 20px;
  color: rgb(0, 0, 0);
  font-style: normal;
  line-height: 36px;
}
.expert-base-info h3 :nth-child(2) {
  padding-left: 10px;
}
.expert-avator {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  margin: 30px auto;
}
.expert-avator img {
  width: 100%;
}
.education span {
  /* color: #9c9c9c; */
  line-height: 36px;
}
.field {
  margin: 15px 0px;
}
.field :nth-child(1) {
  /* color: #9c9c9c; */
  font-weight: 600;
}
.field :nth-child(n + 2) {
  line-height: 27px;
  padding-right: 10px;
}
.ever-work :nth-child(1) {
  /* color: #9c9c9c; */
  font-weight: 600;
}
.ever-work :nth-child(n + 2) {
  line-height: 27px;
  padding: 0px 10px 0px 3px;
}
.self-note {
  font-size: 14px;
}
.self-note span {
  /* color: #9c9c9c; */
  font-weight: 600;
}
.self-note p {
  line-height: 27px;
}
.expertIntroLine {
  height: 1px;
  background: #ccc;
  margin: 30px;
}
.entry-expert-detail-pages {
  position: absolute;
  display: none;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

@media screen and (max-width: 768px) {
  .expert-avator {
    width: 80px;
    height: 80px;
  }
  .expert-avator img {
    padding-left: 0px;
  }

  .education {
    display: none;
  }
  .field {
    display: none;
  }
  .ever-work {
    display: none;
  }
  .expert-base-info h3 :nth-child(1) {
    display: block;
    margin-top: 25px;
    font-weight: 600;
    margin-right: 20px;
  }

  .expert-avator {
    margin: 20px auto;
  }
  .expert-base-info h3 :nth-child(2) {
    display: block;
    font-size: 14px;
    color: #aaa;
  }

  .expert-base-info h3 :nth-child(n + 3) {
    display: none;
    font-size: 14px;
    color: #aaa;
  }
  .expertIntroLine {
    margin: 0px;
  }
  .expert-intro-detail-item {
    margin-top: 0px;
  }
  .entry-expert-detail-pages {
    display: block;
  }
}
</style>
